<template>
  <el-dialog 
    v-el-drag-dialog="{drag: true, full: false, resize: false}"
    title="选择派单车辆" 
    :visible="true"
    :close-on-click-modal="false"
    :append-to-body="true"
    @close="closeMd"
    width="1200px">
    <div class="dgts-fm">
      <el-form :inline="true">
          <el-form-item>
              <el-select 
                  v-model="dg.ps.runArea" 
                  :placeholder="'运营区域'"
                  style="width: 140px">
                  <el-option
                      v-for="(it, index) in dg.runAreas"
                      :key="index"
                      :label="it.label"
                      :value="it.val">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.seats" 
                  multiple collapse-tags
                  :multiple-limit="1"
                  :placeholder="'座位数'"
                  :filterable="false"
                  style="width: 145px">
                  <el-option
                      v-for="(it, index) in dg.seatsList"
                      :key="index"
                      :label="it.label"
                      :value="it.val">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.carColor" 
                  :placeholder="'车辆颜色'"
                  :filterable="true"
                  style="width: 100px">
                  <el-option
                      v-for="(it, index) in dg.carColorList"
                      :key="index"
                      :label="it.label"
                      :value="it.val">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.haveDriver" 
                  :placeholder="'有无驾驶员'"
                  style="width: 100px">
                  <el-option :label="'无驾驶员'" :value="0"></el-option>
                  <el-option :label="'有驾驶员'" :value="1"></el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.plateNum"
                  multiple collapse-tags 
                  :placeholder="'车牌号'"
                  :filterable="true"
                  style="width: 170px">
                  <el-option
                      v-for="(it, index) in dg.plateNumList"
                      :key="index"
                      :label="it.label"
                      :value="it.val">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.searchType" 
                  :placeholder="'查询类型'"
                  style="width: 120px">
                  <el-option :label="'最快到达'" :value="0"></el-option>
                  <el-option :label="'闲时最短'" :value="1"></el-option>
                  <el-option :label="'空驶最短'" :value="2"></el-option>
                  <el-option :label="'天数最少'" :value="3"></el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-select 
                  v-model="dg.ps.haveReserve" 
                  :placeholder="'是否包含预留'"
                  style="width: 120px">
                  <el-option :label="'不包含预留'" :value="0"></el-option>
                  <el-option :label="'包含预留'" :value="1"></el-option>
              </el-select>
          </el-form-item>

          <!-- <el-select 
              v-model="dg.ps.sequence" 
              :placeholder="'排序'"
              style="width: 80px"
          >
              <el-option :label="'顺序'" :value="'ASC'"></el-option>
              <el-option :label="'倒序'" :value="'DESC'"></el-option>
          </el-select> -->

          <el-form-item>
              <el-input 
                  v-model="dg.ps.coverTime" 
                  onblur="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
                  maxlength="5"
                  placeholder="重叠时间"
                  style="width: 100px;">
                  <span slot="suffix" class="c-333">分钟</span>
              </el-input>
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>
      </el-form>
    </div>

    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="400"
      border fit 
      highlight-current-row
      @row-click="selRowChange">
      <el-table-column 
        align="center" 
        :resizable="false"
        width="40">
        <template slot-scope="{row}">
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <el-radio 
            v-model="dg.rowId" 
            :label="row.plateNum">
            {{''}}
          </el-radio>
        </template>
      </el-table-column>

      <el-table-column 
        label="车牌号"
        prop="plateNum"
        width="100">
      </el-table-column>

      <el-table-column 
        label="驾驶员"
        prop="driverInfo"
        width="130">
      </el-table-column>

      <el-table-column 
        label="停靠点"
        prop="stayStation"
        width="100">
      </el-table-column>

      <el-table-column 
        label="上一单行程"
        prop="stayStation"
        width="auto">
      </el-table-column>

      <el-table-column 
        label="座位数"
        prop="seats"
        width="80">
      </el-table-column>

      <el-table-column 
        label="距离"
        prop="distance"
        width="80">
      </el-table-column>

      <el-table-column 
        label="最快到达"
        prop="fastTime"
        width="80">
      </el-table-column>
    </el-table>

    <div style="text-align: center;">
      <el-button 
        type="primary" 
        icon="el-icon-check"
        :disabled="sb.load"
        @click="onSubmit">
        派 车
      </el-button>
      <el-button 
        type="info" 
        icon="el-icon-close"
        @click.native="closeMd">
          取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

import * as orderService from '@/api/services/order.service';
export default {
  name: 'selectDisCars',
  directives: { elDragDialog },
  props: { myData: Object },
  data() { 
    return {
      // 派单订单号数组
      sendOrderNums: [],
      // 提交按钮
      sb: {load: false},
      dg: {
        dgName: 'dg',
        tbName: 'selectDisCarsTb',
        list: [],
        rowId: null,

        // 运营区域
        runAreas: [
          {val: '', label: '运营区域（全部）'},
          {val: 'COUNTY_SER', label: '县际业务'},
          {val: 'CITY_SER', label: '市际业务'},
          {val: 'PROVINCE_SER', label: '省际业务'},
        ],
        // 车队所有车辆座位数列表
        seatsList: [],
        // 车队所有车辆颜色列表
        carColorList: [],
        // 车队所有车牌号
        plateNumList: [],
        ps: {
          // 订单号 eg:[O120200806095606553]
          sendOrderNum: [],

          // 派单座位数（可多选），如果是多单，所有订单的车型也一样的，所以任意取一个即可
          seats: [],

          // 运营区域，多个逗号拼接，默认为空 eg:COUNTY_SER县际业务 CITY_SER市际业务 PROVINCE_SER省际业务
          runArea: '',

          // 车身颜色 eg:red,blue
          carColor: '',

          // 查询车牌号，多个逗号拼接，可为空
          plateNum: [],

          // 查询模式:1可套车辆 2可顶车辆
          searchModel: 1,

          // 有无主驾 0-无主驾 1-有主驾 默认：1
          haveDriver: 1,

          // 查询类型：0最快到达 1闲时最短 2空驶最短 3天数最少
          searchType: 0,

          // 是否包含预留车辆 eg:0(默认不包含) 1包含
          haveReserve: 0,
          
          // 排序 ASC升序(默认) DESC降序
          sequence: 'ASC',

          // 重叠时间
          coverTime: '15',
        }
      },
    }
  },
  created(){
    const that = this, dg = that.dg;

    // 设置初始化参数
    let { ps, seatsList, carColorList, plateNumList } = that.myData;
    if(ps) dg.ps = {...ps};
    // 设置下拉框数据
    dg.seatsList = seatsList; 
    dg.carColorList = carColorList; 
    dg.plateNumList = plateNumList;

    // 获取列表数据
    that.getDgList();
  },
  methods:{
    closeMd(){// 关闭弹框
      this.$emit('myClick', {state: false});
    },
    // 获取智能派车列表
    getDgList(){
      let that = this, U = that.U, p = U.scopy(that.dg.ps);
      
      // 处理参数
      p.sendOrderNum = p.sendOrderNum.join(',');
      p.seats = p.seats.join(',');
      p.plateNum = p.plateNum.join(',');

      let loading = U.qloading('提交中，请稍后...');
      console.log('p888', p);
      orderService.getCarList(p).then(res => {
        U.qclose(loading);
        
        if(res.code != 1){
          that.dg.list = [];
          U.qerror(res.msg);
        }else {
          let list = res.data || [];
          if(list.length === 0){
            U.qerror('未查询到派单车辆数据！');
          }
          // 设置列表数据
          that.dg.list = list;
        }
      });
    },
    // 选择列表行
    selRowChange(row){
      this.dg.rowId = row.plateNum;
    },
    // 查询-数据
    onSubmit(){
      const that = this, U = that.U, rowId = that.dg.rowId, sb = that.sb;

      if(!rowId){
        U.qerror('请选择派单车辆');
      }else{
        let row = that.dg.list.find(it => it.plateNum == rowId);
        console.log('所选车辆：', row);

        // 处理参数
        let p = {
          // 订单号（按照下标获取对应订单号，不分顺序）
          sendOrderNum: that.sendOrderNums,
          // 车牌号
          plateNum: row.plateNum,
          // 驾驶员账号
          driverUname: row.driverUname,
          // 取消订单号，可为空
          cancelNum: ''
        };
        let ps = {sendInfo: [p]};
        console.log('提交参数', ps);
        
        sb.load = true;
        orderService.onlineDisOrder(ps).then(res => {
          if(!res){
            U.qerror('后台出错，后台请求未返回结果');
          }else if(res.code != 1){
            U.qerror(res.msg);
          }else {
            U.qsuccess(res.msg);

            // 关闭弹框
            that.closeMd();
          }
        }).finally(() => {
          sb.load = false;
        });
      }
    },
    
  }
}
</script>